<template>
  <view class="container">
    <!-- 顶部标题栏 -->
    <view class="header">
      <image src="../../static/charging-complete.png" class="header-icon"></image>
      <text class="header-title">充电订单结束通知</text>
    </view>
    
    <!-- 主内容卡片 -->
    <view class="card">
      <!-- 订单概要 -->
      <view class="summary-section">
        <view class="summary-item">
          <image src="../../static/order-id.png" class="summary-icon"></image>
          <text class="summary-label">订单编号:</text>
          <text class="summary-value">{{billId}}</text>
        </view>
        <view class="summary-item">
          <image src="../../static/device-id.png" class="summary-icon"></image>
          <text class="summary-label">设备编号:</text>
          <text class="summary-value">4GM00005548</text>
        </view>
      </view>
      
      <!-- 分隔线 -->
      <view class="divider"></view>
      
      <!-- 充电详情 -->
      <view class="detail-section">
        <view class="detail-row">
          <view class="detail-label">
            <image src="../../static/clock.png" class="detail-icon"></image>
            <text>充电时长</text>
          </view>
          <text class="detail-value">{{formatTime}}</text>
        </view>
        
        <view class="detail-row">
          <view class="detail-label">
            <image src="../../static/money.png" class="detail-icon"></image>
            <text>消费金额</text>
          </view>
          <text class="detail-value money">{{billDetailVO.totalCost ? billDetailVO.totalCost.toFixed(2) : '0.00'}}元</text>
        </view>
        
        <view class="detail-row">
          <view class="detail-label">
            <image src="../../static/warning.png" class="detail-icon"></image>
            <text>结束原因</text>
          </view>
          <text class="detail-value">检测到负载功率降低为0</text>
        </view>
      </view>
      
      <!-- 分隔线 -->
      <view class="divider"></view>
      
      <!-- 备注信息 -->
      <view class="remark-section">
        <view class="remark-header">
          <image src="../../static/remark.png" class="remark-icon"></image>
          <text class="remark-title">备注信息</text>
        </view>
        <text class="remark-content">
          充电之后帐户余额{{billDetailVO.balance ? billDetailVO.balance.toFixed(2) : '0.00'}}元。
          <!-- 本次充电之后帐户余额13.32元。造成该订单提交断电原因 1:充电器松动或脱落; 2:充电器待机,停止充电;如有疑问请致电运营商18912627609 -->
        </text>
        <view class="contact">
          <image src="../../static/phone.png" class="contact-icon"></image>
          <text>如有疑问请致电运营商: 18912627609</text>
        </view>
      </view>
    </view>
    
    <!-- 底部操作按钮 -->
    <view class="action-buttons">
      <button class="action-btn primary" @tap="goToHome">返回首页</button>
      <button class="action-btn secondary" @tap="viewDetails">查看详情</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      billId: "",
      billDetailVO: {
        hours: 0,
        minutes: 0,
        seconds: 0,
        totalCost: 0,
        balance: 0
      }
    }
  },
  computed: {
    formatTime() {
      const pad = num => num.toString().padStart(2, '0');
      return `${pad(this.billDetailVO.hours || 0)}:${pad(this.billDetailVO.minutes || 0)}:${pad(this.billDetailVO.seconds || 0)}`;
    }
  },
  onLoad(options) {
    this.billId = options.billId || "";
  },
  onShow() {
    this.getBillDetail(this.billId);
  },
  methods: {
    getBillDetail(billId) {
      let url = this.$baseUrl + "/billServiceApi/charge/ChargingBill/normalStopBill?billId=" + billId;
      uni.request({
        url: url,
        success: (res) => {
          this.billDetailVO = res.data.data || {};
        }
      });
    },
    goToHome() {
      uni.switchTab({
        url: '/pages/home/home'
      });
    },
    viewDetails() {
      uni.navigateTo({
        url: `/pages/order-detail/order-detail?billId=${this.billId}`
      });
    }
  }
}
</script>

<style>
.container {
  padding: 30rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* 头部样式 */
.header {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
}

.header-icon {
  width: 60rpx;
  height: 60rpx;
  margin-right: 20rpx;
}

.header-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
}

/* 卡片样式 */
.card {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

/* 概要部分 */
.summary-section {
  margin-bottom: 30rpx;
}

.summary-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.summary-icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 15rpx;
}

.summary-label {
  font-size: 28rpx;
  color: #666;
  width: 140rpx;
}

.summary-value {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  flex: 1;
}

/* 分隔线 */
.divider {
  height: 1rpx;
  background-color: #eee;
  margin: 30rpx 0;
}

/* 详情部分 */
.detail-section {
  margin-bottom: 30rpx;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25rpx;
}

.detail-label {
  display: flex;
  align-items: center;
}

.detail-icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 15rpx;
}

.detail-value {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.detail-value.money {
  color: #FF5B5B;
  font-weight: bold;
}

/* 备注部分 */
.remark-section {
  margin-top: 30rpx;
}

.remark-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.remark-icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 15rpx;
}

.remark-title {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.remark-content {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
  display: block;
  margin-bottom: 20rpx;
}

.contact {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #0091FF;
}

.contact-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 10rpx;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 50rpx;
  padding: 0 20rpx;
}

.action-btn {
  width: 48%;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
}

.primary {
  background-color: #0091FF;
  color: white;
}

.secondary {
  background-color: white;
  color: #0091FF;
  border: 1rpx solid #0091FF;
}
</style>